<template>
  <h3>计算结果</h3>
  <van-cell-group>
    <van-field label="还款方式" v-model="getLoanTypeName" readonly />
    <van-field label="还款总额" v-model="getSumPayment" readonly />
    <van-field label="利息总额" v-model="getSumInterest" readonly />
  </van-cell-group>

  <div class="vant-table">
    <table cellspacing="0" :style="bgcolor" style="width:100%" class="table">
      <tr>
        <th class="th" v-for="(item, index) in option.column" :key="index">
          {{ item.label }}
        </th>
      </tr>
      <tr v-for="(item, index) in tableData" :key="index" class="list-tr">
        <td v-for="(context, i) in option.column" :key="i">
          {{ item[context.prop] }}
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "CalculatorTable",
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    totalData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      bgcolor: "",
      option: {
        column: [
          {
            label: "期数",
            prop: "term"
          },
          {
            label: "每期本息",
            prop: "monPayment"
          },
          {
            label: "每期本金",
            prop: "monPrincipal"
          },
          {
            label: "每期利息",
            prop: "monInterest"
          },
          {
            label: "本金余额",
            prop: "balance"
          }
        ]
      }
    };
  },
  computed: {
    getLoanTypeName() {
      let loanTypeName = "";
      if (this.totalData.loanType == 1) {
        loanTypeName = "等额本金";
      } else if (this.totalData.loanType == 2) {
        loanTypeName = "等额本息";
      } else if (this.totalData.loanType == 3) {
        loanTypeName = "先息后本";
      } else if (this.totalData.loanType == 4) {
        loanTypeName = "气球贷";
      } else {
        loanTypeName = "";
      }
      return loanTypeName;
    },
    getSumPayment() {
      return this.totalData.sumPayment;
    },
    getSumInterest() {
      return this.totalData.sumInterest;
    }
  }
};
</script>

<style lang="less" scoped>
.vant-table {
  .table {
    border-radius: 0.185185rem;

    .th {
      height: 1.074074rem;
      line-height: 1.074074rem;
      background-color: #66ccff;
      text-align: center;
      border-top-left-radius: 0.185185rem;
      border-top-right-radius: 0.185185rem;
      font-size: 0.074074rem;
    }

    .list-tr {
      height: 1.074074rem;
      line-height: 1.074074rem;
      font-size: 0.054074rem;
      text-align: center;
    }

    .list-tr:nth-child(2n) {
      background-color: #e6e6e6;
    }
  }
}
</style>
